import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text, Swiper, SwiperItem } from '@tarojs/components'
import { staticUrl } from '@/utils'
import { AtIcon, AtModal, AtDrawer } from 'taro-ui'
import GoodsItem from '../components/goods-item'
import {
  getUserInfo,
  getCheapGoodsList,
  getAreaInfo,
  getAgreementLogCheck,
  createAgreementLogCheck,
  getCheapView,
  getParamsByPId
} from '@/api/cheap'
import dayjs from 'dayjs'
import { updateShareLog, updateViewLog } from '@/api/distribution'
import './index.scss'
import { loginMethod } from '@/utils/login'

const defaultAvatar = staticUrl('/img/others/default_head.png')
const profixBg = staticUrl('/img/cheap/profix_bg.png')
const commissionBtnBg = staticUrl('/img/cheap/btn_bg.png')
const hotIcon = staticUrl('/img/cheap/icon_hot.png')
const icon1 = staticUrl('/img/cheap/icon_1.png')
const icon2 = staticUrl('/img/cheap/icon_2.png')
const icon3 = staticUrl('/img/cheap/icon_3.png')
const icon4 = staticUrl('/img/cheap/icon_4.png')
const icon5 = staticUrl('/img/cheap/icon_5.png')
const icon6 = staticUrl('/img/cheap/icon_6.png')

interface State {
  list: any,
  currentSelect: any,
  cityList: any,
  userInfo: Object,
  agreement: boolean,
  orderRecords: [],
  show: false,
  storeCode: '',
  pMobile: '',
  ppMobile: '',
  loadng: true,
  shareImg: '',
  hasQueryJihuasuanId: Boolean,
  pUnionId: '',
  ppUnionId: '',
  thirdPartyShareSource: '',//集划算推广来源
}

export default class CheapIndex extends Component<any, any> {
  $instance = getCurrentInstance();
  constructor (props) {
    super(props)
    this.state = {
      userInfo: {},
      list: [],
      cityList: [],
      currentSelect: {},
      agreement: false,
      orderRecords: [],
      show: false,
      storeCode: '',
      pMobile: '',
      ppMobile: '',
      loadng: true,
      shareImg: '',
      hasQueryJihuasuanId: false,
      pUnionId: '',
      ppUnionId: '',
      thirdPartyShareSource: ''
    }
  }

  state: State

  parseQueryString(url) {
    console.log('url', url)
    var params = {}
    var arr = url.split('&')
    var duid = url.split('duid=')
    if (duid.length > 1 && duid[1]) {
      params.duid = duid[1]
      return params
    }
    if (arr.length <= 1) {
      return params
    }

    for (var i = 0, l = arr.length; i < l; i++) {
      var a = arr[i].split('=')
      params[a[0]] = a[1]
    }
    return params
  }

  async componentDidMount() {
    Taro.hideShareMenu()
    let pId = ''
    let pJihuasuanId = ''
    let query = this.$instance.router.params || {}
    let {
      jihuasuanId,
      pMobile,
      ppMobile,
      pUnionId,
      ppUnionId,
      id,
      scene = "",
      thirdPartySource,
      storeCode, thirdPartyShareSource } = query
    console.log('query', query)
    // 第三方渠道来源
    if (thirdPartySource) {
      Taro.setStorageSync('THIRD_PARTY_SOURCE', String(thirdPartySource))
    }
    if (scene) { // 存在scene
      console.log('scene', scene)
      let sObj = this.parseQueryString(decodeURIComponent(scene))
      console.log('sObj', sObj)
      if (sObj.pId) {
        pId = sObj.pId
      }
      if (sObj.act) {
        pJihuasuanId = sObj.act
      }
      console.log('sObj.pId', sObj.pId)
      console.log('pId', pId)
    }

    if (pId) {
      await this.getParamsByPId(pId)
    } else {
      this.setState({
        pMobile: pMobile || "",
        ppMobile: ppMobile || '',
        pUnionId: pUnionId || '',
        ppUnionId: ppUnionId || '',
        storeCode,
        jihuasuanId: pJihuasuanId || jihuasuanId || '',
        thirdPartyShareSource: thirdPartyShareSource || ''
      })
    }
    //链接存在集划算Id
    console.log('好友分享jihuasuanId', jihuasuanId)
    if (jihuasuanId) {
      this.setState({
        hasQueryJihuasuanId: true
      })
    }
    console.log('this.state.', this.state)
    if (pUnionId || ppUnionId || pMobile || ppMobile || thirdPartyShareSource) { // 如果没有带进来的话，去拿缓存的，缓存的超过两天就自动失效，清空
      Taro.setStorageSync('CHEAP_DATA_MINI', {
        pMobile: pMobile || '',
        ppMobile: ppMobile || '',
        jihuasuanId: jihuasuanId || '',
        storeCode: storeCode || '',
        t: this.getCurrentDate(),
        ppUnionId: ppUnionId || '',
        pUnionId: pUnionId || '',
        thirdPartyShareSource: thirdPartyShareSource || ''
      })
    } else {
      let cheapData = Taro.getStorageSync('CHEAP_DATA_MINI')
      let current = dayjs(this.getCurrentDate())
      if (cheapData && cheapData.t) {
        let isEffect = current.diff(cheapData.t, 'day')
        if (isEffect <= 2) {
          pUnionId = cheapData.pUnionId
          ppUnionId = cheapData.ppUnionId
          pMobile = cheapData.pMobile
          ppMobile = cheapData.ppMobile
          thirdPartyShareSource = cheapData.thirdPartyShareSource
          this.setState({
            pUnionId: cheapData.pUnionId,
            ppUnionId: cheapData.ppUnionId,
            pMobile: cheapData.pMobile,
            ppMobile: cheapData.ppMobile,
            storeCode: cheapData.storeCode,
            thirdPartyShareSource: cheapData.thirdPartyShareSource
          })
        } else { // 失效
          Taro.setStorageSync('CHEAP_DATA_MINI', '')
        }
      }
    }
    console.log('this.state', this.state)
    await this.getUserInfo()
    await this.getAreaInfo()
  }
  componentDidShow() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    if (!USERINFO) {
      Taro.showModal({
        title: "提示",
        content: "请先登录",
        showCancel: false,
        confirmText: '去登录',
        confirmColor: '#12b3ff',
      }).then(res => {
        if (res.confirm) {
          loginMethod()
        }
      })
    }
  }

  onShareAppMessage(res) {
    console.log('res', res, this.state)
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    let query = this.$instance.router.params || {}
    let {
      thirdPartySource,
    } = query
    let { list, pMobile = '', shareImg, pUnionId = '', ppUnionId = '', ppMobile = '', thirdPartyShareSource = '' } = this.state
    if (res.from == 'button') { // 来自页面按钮的转发
      let paraams = {
        jihuasuanId: list[0].jihuasuanId,
        mobile: USERINFO.mobile,
        pMobile: pMobile || '',
        ppMobile: ppMobile || '',
        ppUnionId,
        pUnionId,
        jihuasuanGoodsId: res.target.id,
        thirdPartyShareSource: thirdPartyShareSource || ''
      }
      updateShareLog(paraams)
      return {
        title: list[0].shareHeaderTitle || `养车超低价，分享赚佣金`,
        path: `pages/cheap/index/index?jihuasuanId=${list[0].jihuasuanId}&pMobile=${USERINFO.mobile || ''}&ppMobile=${pMobile || ''}${thirdPartySource ? `&thirdPartySource=${thirdPartySource}` : ''}&ppUnionId=${pUnionId || ''}${thirdPartyShareSource ? `&thirdPartyShareSource=${thirdPartyShareSource}` : ''}&registerType=7`,
        imageUrl: list[0].upload6Url,
        bgImgUrl: list[0].upload6Url
      }
    } else {
      let paraams = {
        jihuasuanId: list[0].jihuasuanId,
        mobile: USERINFO.mobile,
        pMobile: pMobile || '',
        ppMobile: ppMobile || '',
        ppUnionId,
        pUnionId,
        thirdPartyShareSource: thirdPartyShareSource || ''
      }
      updateShareLog(paraams)
      return {
        title: list[0].shareHeaderTitle || `养车超低价，分享赚佣金`,
        path: `pages/cheap/index/index?jihuasuanId=${list[0].jihuasuanId}&pMobile=${USERINFO.mobile || ''}&ppMobile=${pMobile || ''}${thirdPartySource ? `&thirdPartySource=${thirdPartySource}` : ''}&ppUnionId=${pUnionId || ''}${thirdPartyShareSource ? `&thirdPartyShareSource=${thirdPartyShareSource}` : ''}&registerType=7`,
        imageUrl: list[0].upload6Url,
        bgImgUrl: list[0].upload6Url
      }
    }

  }

  /**
 * 获取协议记录
 **/
  async getAgreeMentLog() {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    Taro.showLoading({
      title: '加载中...',
      mask: true
    })
    getAgreementLogCheck({
      agreementId: 1,
      mobile: USERINFO.mobile
    }).then(res => {
      let data = res.data.data
      this.setState({
        agreement: data.flag == 0
      })
    }).finally(() => {
      Taro.hideLoading()
    })
  }

  // 同意服务协议
  handleAgree = () => {
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    Taro.showLoading({
      title: '加载中...',
      mask: true
    })
    createAgreementLogCheck({
      agreementId: 1,
      mobile: USERINFO.mobile
    }).then((res) => {
      this.setState({
        agreement: false
      })
    }).finally(() => {
      Taro.hideLoading()
    })
  }

  /**
   * 获取用户信息
   */
  getUserInfo() {
    getUserInfo({}, '', true).then(res => {
      let data = res.data.data
      if (!data.avatarUrl) {
        data.avatarUrl = defaultAvatar
      }
      this.setState({
        userInfo: data
      })
    })
  }

  //获取城市
  getAreaInfo() {
    getAreaInfo({ location: '' }).then(res => {
      let data = res.data.data
      let { adCode, districtCode, districtName, name } = data
      this.setState({
        cityList: data,
        currentSelect: {
          adCode, districtCode, districtName, name
        }
      }, () => {
        this.getCheapGoodsList()
        this.getAgreeMentLog()
      })
    })
  }
  // 活动详情
  getActivityView() {
    let { list, pMobile, ppMobile, ppUnionId, pUnionId, } = this.state
    let { jihuasuanId } = list[0]
    const USERINFO = Taro.getStorageSync('IS_USERINFO')
    getCheapView({
      id: jihuasuanId
    }).then(res => {
      let orderRecords = res.data.data.orderRecords
      list[0] = Object.assign(list[0], {
        shareBodyTitle: res.data.data.shareBodyTitle,
        upload6Url: res.data.data.upload6Url,
        shareHeaderTitle: res.data.data.shareHeaderTitle
      })
      if (USERINFO && USERINFO.mobile) { //需判断手机号存在（场景:用户授权微信登录，没有授权手机号登录，导致统计有误
        updateViewLog({
          jihuasuanId,
          mobile: USERINFO.mobile,
          jihuasuanGoodsId: res?.data?.data?.goods && res.data.data.goods.length && res.data.data.goods[0].id || '',
          pMobile: pMobile || '',
          ppMobile: ppMobile || '',
          ppUnionId: ppUnionId || '',
          pUnionId: pUnionId || ''
        })
      }
      this.setState({
        shareImg: res.data.data.upload6Url || '',
        list,
        orderRecords
      })
    })
  }

  //获取活动商品
  getCheapGoodsList() {
    let { currentSelect, jihuasuanId, hasQueryJihuasuanId } = this.state
    let params = {
      clientSource: 0,
      cityCode: currentSelect && currentSelect.adCode || '440100'
    }
    console.log('好友分享活动', hasQueryJihuasuanId, jihuasuanId)
    if (hasQueryJihuasuanId && jihuasuanId) {
      params.jihuasuanId = jihuasuanId
    } else {
      console.log('执行进来了吗', Taro.getStorageSync('CHEAP_DATA_MINI'))
      let cheapData = Taro.getStorageSync('CHEAP_DATA_MINI')
      let current = dayjs(this.getCurrentDate())
      if (cheapData && cheapData.t) {
        let isEffect = current.diff(cheapData.t, 'day')
        if (isEffect <= 2) {
          if (cheapData.jihuasuanId) {
            params.jihuasuanId = cheapData.jihuasuanId
            console.log('读取缓存jihuasuanId', cheapData.jihuasuanId)
          }
        }
      }
    }
    getCheapGoodsList(params).then(res => {
      let data = res.data.data
      this.setState({
        loadng: false
      })
      if (data.length) {
        this.setState({
          list: [data[0]],
        }, () => {
          this.getActivityView()
        })
      }
    })
  }

  //弹窗
  showVisibile1() {
    Taro.showModal({
      title: '温馨提示',
      content: "累计收益=已提现佣金+可提现佣金",
      showCancel: false,
      confirmText: '知道了',
      confirmColor: "#12B3FF"
    })
  }
  showVisibile2() {
    Taro.showModal({
      title: '温馨提示',
      content: `用户还有订单未服务完成\r\n服务完成后，系统自动将待到账\r\n佣金转入可提现佣金中`,
      showCancel: false,
      confirmText: '知道了',
      confirmColor: "#12B3FF"
    })
  }

  gotoRule() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/cheap-rule` })
  }

  gotoBudget() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/budget` })
  }

  gotoWithdraw() {
    // if(process.env.TARO_ENV === 'weapp'){
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/withdraw` })
    // }else{ // 支付宝提示敬请期待
    // 	Taro.showModal({
    // 		title: '温馨提示',
    // 		content: `该功能还在开发中，敬请期待！`,
    // 		showCancel: false,
    // 		confirmText: '知道了',
    // 		confirmColor: "#12B3FF"
    // 	})
    // }
  }

  gotoActivityRule() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/activity-rule` })
  }

  gotoCommonProblem() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/common-problem` })
  }

  gotoTutorial() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/tutorial` })
  }

  gotoRank() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/rank` })
  }

  gotoExtActivityRule(e, id) {
    e.stopPropagation()
    let query = {
      jihuasuanId: id
    }
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/activity-rule&query=${JSON.stringify(query)}` })
  }


  // 不同意直接返回首页
  handleCancel() {
    Taro.switchTab({
      url: '/pages/tabbar/index/index'
    })
  }
  gotoOrderList() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/order` })
  }

  gotoCustomer() {
    Taro.navigateTo({ url: `/pages/webview/index/index?path=/cheap/customer` })
  }

  gotoActivity = () => {
    console.log('this.state', this.state)
    let { pMobile = '', ppMobile = '', storeCode = '', pUnionId = '', ppUnionId = '', thirdPartyShareSource = '' } = this.state
    Taro.navigateTo({
      url: `/pages/cheap/activity/index?pMobile=${pMobile}&ppMobile=${ppMobile}&storeCode=${storeCode}&pUnionId=${pUnionId}&ppUnionId=${ppUnionId}&thirdPartyShareSource=${thirdPartyShareSource}`
    })
  }

  gotoMyOrderList = () => {
    Taro.navigateTo({
      url: `/pages/order/list/index`
    })
  }

  /**
   * 跳转详情
   **/
  gotoDetails(item) {
    console.log('item', item)
    let { pMobile = '', ppMobile = '', storeCode = '', pUnionId = '', ppUnionId = '', thirdPartyShareSource = '' } = this.state
    Taro.navigateTo({ url: `/pages/cheap/topic/index?id=${item.jihuasuanId}&pMobile=${pMobile}&ppMobile=${ppMobile}&storeCode=${storeCode}&pUnionId=${pUnionId}&ppUnionId=${ppUnionId}&thirdPartyShareSource=${thirdPartyShareSource}` })
  }

  chooseCity = (e) => {
    console.log('e', e)
    this.setState({
      show: false,
      currentSelect: e
    }, () => {
      this.getCheapGoodsList()
    })
  }

  // 解析海报ID
  async getParamsByPId(pId) {
    Taro.showLoading({
      title: '加载中...',
      mask: true
    })
    await getParamsByPId({
      posterId: pId
    }).then(res => {
      let data = res.data.data
      let { directShareMobile, indirectShareMobile, storeCode, activityId, thirdPartySource } = data
      this.setState({
        pMobile: directShareMobile,
        ppMobile: indirectShareMobile,
        storeCode,
        jihuasuanId: activityId,
        hasQueryJihuasuanId: true
      })
      if (thirdPartySource) {
        Taro.setStorageSync('THIRD_PARTY_SOURCE', String(thirdPartySource))
      }
      return
    }).finally(() => {
      Taro.hideLoading()
    })
  }
  getCurrentDate() {
    let date = new Date()
    return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
  }

  /**
    * 筛选城市区域
    **/
  selectCity = () => {
    this.setState({
      show: true
    })
  }

  render() {
    const { list, userInfo, agreement, orderRecords, shareImg, show, currentSelect, cityList, loadng, storeCode, pMobile, ppMobile, pUnionId,
      ppUnionId, thirdPartyShareSource } = this.state
    var reg = /(\d{3})\d{4}(\d{4})/;
    var newmobile = userInfo.mobile && userInfo.mobile.replace(reg, "$1****$2")
    return (
      <View className='user'>
        <View className='bg'>

        </View>
        <View className='container'>
          <View className='user-info' style={{ 'background': `url(${profixBg}) no-repeat 100% 100%`, 'backgroundSize': '100% 100%' }}>
            <View className='user-box'>
              <View className='act-xy' onClick={this.gotoRule}>活动协议</View>
              <Image className='user-head' src={userInfo.avatarUrl}></Image>
              <View className="user-details">
                <Text className="name">{newmobile}</Text>
              </View>
            </View>
          </View>
          <View className='user-commission'>
            <View className='top'>
              <View className='left' onClick={this.gotoBudget}>
                可提现(元)
                <Text>{userInfo.canDrawMoney}</Text>
                <AtIcon customStyle={{ 'fontWeight': "normal" }} value='chevron-right' size='14' color="#999"></AtIcon>
              </View>
              <View onClick={this.gotoWithdraw} className='btn' style={{ 'background': `url(${commissionBtnBg}) no-repeat 100% 100%`, 'backgroundSize': '100% 100%' }}>去提现</View>
            </View>
            <View className='center'>
              <View className='item'>
                <View className='value'>{userInfo.totalIncome}</View>
                <View className='label'>累计收益(元)<AtIcon customStyle={{ 'fontWeight': "normal" }} value='help' size='17' color="#999" onClick={this.showVisibile1.bind(this)}></AtIcon></View>
              </View>
              <View className='item'>
                <View className='value'>{userInfo.withdrawMoney}</View>
                <View className='label'>已提现(元)</View>
              </View>
              <View className='item'>
                <View className='value'>{userInfo.waitMoney}</View>
                <View className='label'>待到账(元)<AtIcon customStyle={{ 'fontWeight': "normal" }} value='help' size='17' color="#999" onClick={this.showVisibile2.bind(this)}></AtIcon></View>
              </View>
            </View>

            <View className="bottom">
              <View className="item" onClick={this.gotoOrderList}>
                累计推广订单
                <View className="item-num">{userInfo.totalShareOrder}</View>
                <AtIcon customStyle={{ 'fontWeight': "normal" }} value='chevron-right' size='14' color="#999"></AtIcon>
              </View>
              <View className="item" onClick={this.gotoCustomer}>
                累计推广客户
                <View className="item-num">{userInfo.totalShareOrderCustomer} </View>
                <AtIcon customStyle={{ 'fontWeight': "normal" }} value='chevron-right' size='14' color="#999"></AtIcon>
              </View>
            </View>
          </View>

          <View className='activity-list'>
            <View className='title'>
              <View className='left'>
                <Image className='icon' src={hotIcon}></Image>
                分享赚不停
              </View>
              <View className='more' onClick={this.gotoActivity}>
                点击更多优惠<AtIcon customStyle={{ 'fontWeight': "bold" }} value='chevron-right' size='17' color="#E0251A"></AtIcon>
              </View>
            </View>
            {
              list.map(item => {
                return (
                  <View onClick={() => this.gotoDetails(item)} className="act-rule--warp">
                    <View className='act-rule' onClick={(e) => this.gotoExtActivityRule(e, item.jihuasuanId)}>活动规则</View>
                    <GoodsItem shareData={{
                      shareImg,
                      storeCode,
                      pMobile,
                      ppMobile,
                      pUnionId,
                      ppUnionId,
                      thirdPartyShareSource
                    }} goods={item}></GoodsItem>
                  </View>
                )
              })
            }
            {
              !loadng && list.length == 0 &&
              <View className="no-list">
                <View className="no-list-tips"></View>
                <View className="tips-txt">当前城市暂未开放活动，<Text class="link"
                  onClick={this.selectCity}>去别的城市看看</Text></View>
              </View>
            }

          </View>
          {
            orderRecords && orderRecords.length > 0 &&
            <View className='swiper-log'>
              <AtIcon customStyle={{ 'fontWeight': "normal" }} value='volume-plus' size='24' color="#F29400"></AtIcon>
              <Swiper vertical autoplay interval={3000} className="my-swipe">
                {
                  orderRecords && orderRecords.length > 0 && orderRecords.map((item, index) => {
                    return <SwiperItem className="my-swipe-item" key={index}>
                      <View class="left">
                        <Text class="mobile">{item.name}</Text>
                        <Text class="msg">{item.title}</Text>
                      </View>
                      <View class="time">{item.date}</View>
                    </SwiperItem>
                  })
                }
              </Swiper>
            </View>
          }


          <View className='profit'>
            <View className='profit-item' onClick={this.gotoActivity}>
              <Image className='icon' src={icon1}></Image>
              <View className='label'>推广赚钱</View>
            </View>
            <View className='profit-item' onClick={this.gotoRank}>
              <Image className='icon' src={icon2}></Image>
              <View className='label'>排行榜</View>
            </View>
            <View className='profit-item' onClick={this.gotoTutorial}>
              <Image className='icon' src={icon3}></Image>
              <View className='label'>新手教程</View>
            </View>
            {/* <View className='profit-item' onClick={this.gotoRule}>
              <Image className='icon' src={icon4}></Image>
              <View className='label'>活动协议</View>
            </View> */}
            <View className='profit-item' onClick={this.gotoMyOrderList}>
              <Image className='icon' src={icon6}></Image>
              <View className='label'>我的订单</View>
            </View>
            <View className='profit-item' onClick={this.gotoCommonProblem}>
              <Image className='icon' src={icon5}></Image>
              <View className='label'>常见问题</View>
            </View>
          </View>

        </View >

        <AtDrawer
          show={show}
          mask
          width={'80%'}
          right={true}
        >
          <View className="city-box">
            <View className="platform-top" >
              当前选择城市：{currentSelect.name || '广州市'}
            </View>
            {
              cityList.list && cityList.list.length > 0 ?
                cityList.list.map((item, index) => {
                  return <View KEY={index} >
                    <View className="letter">{item.firstLetter}</View>
                    {
                      item.items.map((c, ci) => {
                        return <View className="area-name" key={ci}
                          onClick={() => this.chooseCity(c)} >{c.name}</View>

                      })
                    }
                  </View>
                }) : null
            }

          </View>
        </AtDrawer>
        <AtModal isOpened={agreement} closeOnClickOverlay={false}>
          <View className="agreement-warp">
            <View className="title">服务协议</View>
            <View className="pg">
              感谢您对集群车宝—直以来的信任！为了更好的保护您个人权益，请您仔细阅读并理解我们最新的<Text className="blue"
                onClick={this.gotoRule}>《集划算分销员协议》</Text>、<Text className="blue"
                  onClick={this.gotoActivityRule}>《集划算活动规则》</Text>。若您勾选并点击“同意”,即表示您已阅读并同意上述条款，集划算将严格按照。<br />
              <Text className="blue"
                onClick={this.gotoRule}>《集划算分销员协设》</Text>、<Text className="blue"
                  onClick={this.gotoActivityRule}>《集划算活动规则》</Text>的各项条款使用和保护您的权益;若您点击“不同意”则为退出。
            </View>
            <View>
              <View className="btn-agree"
                onClick={this.handleAgree}>同意</View>
              <View className="btn-cancel"
                onClick={this.handleCancel}>不同意，并退出</View>
            </View>
          </View>
        </AtModal>
      </View >
    )
  }
}
